﻿<div [@routerTransition]>
    <h3 class="form-title">{{l("PaymentInfo")}}</h3>

    <form class="register-form" method="post" asp-action="PaymentResult" id="formPaymentResult">
        <input type="hidden" name="EditionId" [(ngModel)]="edition.id" />
        <input type="hidden" name="Gateway" [(ngModel)]="subscriptionPaymentGateway.Paypal" />
        <input type="hidden" name="EditionPaymentType" [(ngModel)]="editionPaymentType" />

        <div class="hint text-center">{{l("Edition")}}: {{edition.displayName}}</div>

        <div *ngIf="edition.monthlyPrice" class="form-group">
            <label class="mt-radio mt-radio-outline margin-bottom-0">
                <input class="form-control" type="radio" name="PaymentPeriodType"
                       checked
                       [value]="paymentPeriodType.Monthly"
                       (change)="onPaymentPeriodChangeChange(paymentPeriodType.Monthly)" />{{l("MonthlyPrice")}}: ${{edition.monthlyPrice | number : '1.2-2'}}
                <span></span>
            </label>
        </div>

        <div *ngIf="edition.annualPrice" class="form-group">
            <label class="mt-radio mt-radio-outline margin-bottom-0">
                <input class="form-control" type="radio" name="PaymentPeriodType"
                       [value]="paymentPeriodType.Annual"
                       (change)="onPaymentPeriodChangeChange(paymentPeriodType.Annual)" />{{l("AnnualPrice")}}: ${{edition.annualPrice | number : '1.2-2'}}
                <span></span>
            </label>
        </div>
        
        <paymentGateways [(edition)]="edition" [(paymentPeriodType)]="selectedPaymentPeriodType" [(editionPaymentType)]="editionPaymentType"></paymentGateways>
    </form>
</div>